<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GO机网管理后台</title>
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">

	<link href="../../css/bootstrap.min.css" rel="stylesheet">
	<link href="css/nifty.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="js/webuploader-0.1.5/webuploader.css">
	<link href="../../css/demo/nifty-demo-icons.min.css" rel="stylesheet">
	<link href="../../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<link href="../../plugins/pace/pace.min.css" rel="stylesheet">
	<script src="../../plugins/pace/pace.min.js?2016/8/5"></script>
	<script src="../../js/jquery-2.2.1.min.js"></script>
	
	<style>
		#table p{
			padding: 5px;
			margin: 0;
			color: #757575;
		}
		td{
			vertical-align: middle!important;

		}

		.panel.active{
			border-color: #2ac845;
		}
	</style>
	<script src="../../js/jquery-2.2.1.min.js"></script>

</head>
<body>
<div id="container" class="effect mainnav-lg">
	@@include('public/header.html')
	<!--主体start-->
	<div class="boxed">
		<div id="content-container">
			<div id="page-title">
				<h1 class="page-header text-overflow">回收机型品牌设置</h1>
			</div>
			<div id="app-root" class="container" v-cloak>
				<button class="btn btn-default add-brand-button" @click="addMobileBrand">添加品牌</button>
				<style>
					.brand-name .btn-default{
						margin-left:15px;
					}
					.version-item {
						width:120px;
						display:inline-block;
						vertical-align: middle;
						flex-direction: column;
						text-align: center;
						border:1px solid #f2f2f2;
						box-sizing: border-box;
						padding:5px;
						margin-right:15px;
						margin-bottom:15px;
					}
					.version-img{
						width:100%;
						height:120px;
						box-sizing: border-box;
					}
					.version-img img{
						max-width: 100%;
						max-height:100%;
					}
					.version-name .fa{
						position:relative;
						left:10px;
						cursor:pointer;
					}
				</style>
				<table class="table table-bordered mar-top">
					<tr>
						<th width="200">品牌</th>
						<th>机型</th>
					</tr>
					
					<tr v-for="brand in brands">
						<td class="brand-name text-center">
							<span @click="editMobileBrand(brand.bid, $event)">{{brand.b_name}}</span>
							<i class="fa fa-trash" aria-hidden="true" @click="delete_brand(brand.bid)"></i>
							<button class="btn btn-default" @click="addMobileVersion(brand.bid)">添加机型</button>
						</td>
						<td class="version-container">
							<div class="version-item" v-for="version in brand.version">
								<div class="version-img">
									<img v-bind:src="version.v_imgurl" :data-name="version.v_name" @click="editMobileVersion(version.vid, $event)">
								</div>
								<div class="version-name">
									<span>{{version.v_name}}</span>
									<i class="fa fa-trash" aria-hidden="true" @click="delete_version(version.vid)"></i>
								</div>
							</div>
						</td>
					</tr>
				</table>
				<div class="modal fade" id="brandModal" tabindex="-1" role="dialog" aria-labelledby="brandModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title" id="brandModalLabel">{{m_title}}</h4>
							</div>
							<div class="modal-body"><input type="text" class="form-control" v-model="b_name"></div>
							<div class="modal-body" v-show="error">
								<div class="alert alert-danger" role="alert">
									<strong>Warning!</strong> {{error_message}}
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-primary" @click="submitBrand">确定</button>
							</div>
						</div>
					</div>
				</div>
				<div class="modal fade" id="versionModal" tabindex="-1" role="dialog" aria-labelledby="versionModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title" id="versionModalLabel">{{m_title}}</h4>
							</div>
							<div class="modal-body"><input type="text" class="form-control" v-model="v_name"></div>
							<div class="modal-body" id="dynamic-html"></div>
							<div class="modal-body" v-show="error">
								<div class="alert alert-danger" role="alert">
									<strong>Warning!</strong> {{error_message}}
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-primary" @click="submitVersion">确定</button>
							</div>
						</div>
					</div>
				</div>
				<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title" style="text-align: center;">是否确认删除？</h4>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-primary" data-dismiss="modal" @click="ok">确定</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--主体end-->

<!--===================================================-->
<!--END NAVBAR-->

	<nav id="mainnav-container">
		@@include('public/left_menu.html')

	</nav>

</div>
</body>
@@include('public/footer.html')

<script type="text/javascript" src="js/webuploader-0.1.5/webuploader.min.js"></script>
<script src="../../js/base.js"></script>
<script type="text/javascript" src="js/pages/brand-version.js"></script>
</html>